<template>
  <div class="login-container">
    <header class="login-header">欢迎登陆</header>
    <section class="login-form">
      <a-form :form="form"
              :label-col="{ span: 0 }"
              :wrapper-col="{ span: 24 }"
              @submit="signIn">
        <a-form-item>
          <a-input placeholder="请输入账号"
                   v-decorator="['username',{ rules: [{ required: true, message: '请输入账号！' }] }]">
            <a-icon slot="prefix"
                    type="user" />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input placeholder="请输入密码"
                   type="password"
                   v-decorator="['password',{ rules: [{ required: true, message: '请输入如密码' }] }]">
            <a-icon slot="prefix"
                    type="lock" />
          </a-input>
        </a-form-item>

        <a-form-item>
          <a-button type="primary"
                    style="width:100%;"
                    html-type="submit">
            登录
          </a-button>
        </a-form-item>
      </a-form>
    </section>
  </div>
</template>

<script>
import { Icon, Input, Button, Form } from 'ant-design-vue'
import { doSm3AndSm2Encrypt } from '@/utils/sm'
import { grantType, clientId, clientSecre } from '@/config/index'
export default {
  components: {
    AIcon: Icon,
    AInput: Input,
    AButton: Button,
    AForm: Form,
    AFormItem: Form.Item
  },
  data () {
    return {
      loading: false,
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'coordinated' })
    }
  },
  computed: {},
  watch: {},
  // 方法集合
  methods: {
    signIn (e) {
      e.preventDefault()
      this.form.validateFields((err, form) => {
        if (!err) {
          const params = {
            grant_type: grantType,
            client_id: clientId,
            client_secret: clientSecre,
            username: form.username,
            password: doSm3AndSm2Encrypt(form.password)
          }
          console.log('Received form of form: ', form)
          this.$store
            .dispatch('login', Object.assign({}, params))
            .then(res => {
              if (res.code) {
                const query = Object.assign({}, params, { code: res.code })
                this.$store
                  .dispatch('loginSys', query)
                  .then(res => {
                    // 用户信息
                    this.$store.dispatch('generateRoutes').then(res => {
                      this.$router.push('/')
                    }).catch(error => {
                      console.log(error)
                    })
                  })

                  .catch(error => {
                    this.loading = false
                    // 修改默认密码
                    if (
                      error.response.data.code === '4004' &&
                      error.response.data.error_description ===
                      '不能使用默认密码登录，请修改密码后再登录'
                    ) {
                      this.$router.push('/editOriginalPwa')
                    }
                  })
              }
            })
            // eslint-disable-next-line handle-callback-err
            .catch(error => {
              this.loading = false
            })
        }
      })
    }
  },
  created () { },
  mounted () { },
  destroyed () { }
}
</script>
<style lang="scss">
.login-container {
  width: 100%;
  padding: 32px 0 24px;
  box-sizing: border-box;
  .login-header {
    width: 100%;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 20px;
    margin: 40px auto;
  }
  .login-form {
    width: 368px;
    height: 300px;
    padding: 0 24px;
    margin: 0 auto;
  }
}
</style>
